<template>
  <div class="edit-container">
    <form v-if="!submitted"  ref="submit">
    <label for="">标题:</label>
    <input type="text" v-model="blogs.title">
    <label for="">内容:</label>
     <textarea  cols="30" rows="10" v-model="blogs.content"></textarea>
    <div class="check">
      <label for="vue">vuejs</label>
      <input type="checkbox" v-model="blogs.check" id="vue" value="vue">
      <label for="node">nodejs</label>
      <input type="checkbox" v-model="blogs.check" id="node" value="node">
      <label for="angular">angularjs</label>
      <input type="checkbox" v-model="blogs.check" id="angular" value="angular">
      <label for="react">reactjs</label>
      <input type="checkbox" v-model="blogs.check" id="react" value="react">
    </div>
    发表人: <select v-model="blogs.sel">
      <option>张三</option>
      <option>李四</option>
      <option>王五</option>
    </select>
    <input type="submit" value="修改博客" @click.prevent="submit">
    </form>

    <h1 v-if="submitted">博客修改成功</h1>
    
    <div class="show-content">
      <p>文章标题: {{ blogs.title }}</p>
      <p>文章内容: {{ blogs.content }}</p>
      <p>文章-check: {{ blogs.check }}</p>
      <p>文章-select: {{ blogs.sel }}</p>
    </div>

  </div>
</template>
<script>
import axios from 'axios'
  export default{
    data(){
      return {
        id:this.$route.params.id,
        blogs:{
          title:'',
          content:'',
          check:[],
          sel:[]
        },
        submitted:false,
      }
    },
    methods:{
      submit(){
        // this.$http.put('https://my-blog-ae84c.firebaseio.com/posts/'+ this.id +'.json',this.blogs)
        axios.put('https://my-blog-ae84c.firebaseio.com/posts/'+ this.id +'.json',this.blogs)
        .then(ret => {
          this.submitted=true
          return ret.data

        })
      }
    },
    created(){
    axios.get('https://my-blog-ae84c.firebaseio.com/posts/'+ this.id +'.json')
        .then(ret => {
          // return ret.json()
          return ret.data
        })
        .then(ret => {
          console.log(ret)
          this.blogs=ret
          
        })
    }
  }
</script>
<style scoped>
.edit-container{
  width: 100%;
  max-width: 1260px;
  margin:0 auto;
  padding:20px; 
}

input{
  display: block;
  margin:10px 0 10px 0;  
}
input[type="text"],textarea{
  width:90%;

}
.check input{
  display: inline-block;
  margin-right:10px;
}
label{
  display: block;
}
.check label{
  display: inline-block;
}
</style>
